import ScrollBarLayout from '@/components/ScrollBarLayout';
import { useContext, useMemo, useState } from 'react';
import { SupplierLocaldataContext } from '../common';
import pageStyles from '@/common/pageLayout.less';
import { getColorTextLoadMap, renderRegionText } from '@/utils';
import { Tooltip } from 'antd';
import MyIcon from '@/components/MyIcon';

export const UpdateRightContactBody: React.FC<SupplierManageAPI.IUpdateRightContactBody> = ({ contactsCurrentIndex }) => {
  /**获取上下文 */
  const { contactsSwitchList } = useContext(SupplierLocaldataContext);

  /** 是否展示更多 */
  const [isOpenMoveData, setIsOpenMoveData] = useState<boolean>(false);

  /** 获取当前展示数据 */
  const contactsInfoCurrent = useMemo(() => {
    if (contactsSwitchList?.length) {
      return contactsSwitchList[contactsCurrentIndex];
    } else {
      return null;
    }
  }, [contactsCurrentIndex, contactsSwitchList]);

  /**
   * 处理数据字典返回Dom
   * @param dicName 1
   * @returns
   */
  const handDicColorDom = (dicName: string) => {
    const { color, colorText } = getColorTextLoadMap(dicName);
    return (
      <dd
        style={{
          color: color,
        }}
      >
        {colorText || '--'}
      </dd>
    );
  };
  return (
    <ScrollBarLayout>
      <div className={pageStyles['conmmonRightCardList']} style={{ padding: '0px 15px' }}>
        <dl>
          <dt>
            {/* <MyIcon type="icon-lianxiren" /> */}
            姓名
          </dt>
          ：<dd>{contactsInfoCurrent?.fullName || '--'}&nbsp;</dd>
        </dl>
        <dl>
          <dt>性别</dt>：
          <dd
            style={{
              color:
                contactsInfoCurrent?.sex == 1
                  ? '#096dd9'
                  : contactsInfoCurrent?.sex == 2
                  ? '#fd018b'
                  : contactsInfoCurrent?.sex == 0
                  ? '#faad14'
                  : '',
            }}
          >
            {contactsInfoCurrent?.sex == 1 ? '男' : contactsInfoCurrent?.sex == 2 ? '女' : contactsInfoCurrent?.sex == 0 ? '未知' : '--'}
          </dd>
        </dl>
        <dl>
          <dt>手机号码</dt>：<dd>{contactsInfoCurrent?.phoneMobile || '--'}</dd>
        </dl>
        <dl>
          <dt>办公电话</dt>：<dd>{contactsInfoCurrent?.phoneOffice || '--'}</dd>
        </dl>
        <dl>
          <dt>备用手机</dt>：<dd>{contactsInfoCurrent?.phoneSpare || '--'}</dd>
        </dl>
        <dl>
          <dt>邮箱编号</dt>：<dd>{contactsInfoCurrent?.emailNum || '--'}</dd>
        </dl>
        <dl>
          <dt>是否首要</dt>：
          <dd>
            {contactsInfoCurrent?.isFirst == 0 ? (
              <span style={{ color: '#ff4000' }}>否</span>
            ) : contactsInfoCurrent?.isFirst == 1 ? (
              <span style={{ color: '#52c41a' }}>是</span>
            ) : (
              '--'
            )}
          </dd>
        </dl>
        <dl>
          <dt>所在区域</dt>：<dd>{renderRegionText(contactsInfoCurrent)}</dd>
        </dl>
        <dl>
          <dt>证件类型</dt>：{handDicColorDom(contactsInfoCurrent?.cardTypeName)}
        </dl>
        <dl>
          <dt>证件号码</dt>：<dd>{contactsInfoCurrent?.cardNum || '--'}</dd>
        </dl>
        <dl>
          <dt>所在公司</dt>：<dd>{contactsInfoCurrent?.companyName || '--'}</dd>
        </dl>
        <dl>
          <dt>所在部门</dt>：<dd>{contactsInfoCurrent?.deptName || '--'}</dd>
        </dl>
        <dl>
          <dt>当前职务</dt>：<dd>{contactsInfoCurrent?.positionName || '--'}</dd>
        </dl>
        <dl>
          <dt>住址</dt>：<dd>{contactsInfoCurrent?.addressInfo || '--'}</dd>
        </dl>
        <dl
          style={{
            margin: '10px 0px',
            display: !isOpenMoveData ? 'flex' : 'none',
            justifyContent: 'center',
          }}
        >
          <Tooltip title="更多">
            <a
              onClick={() => {
                setIsOpenMoveData(true);
              }}
            >
              <MyIcon style={{ fontSize: 18 }} type="icon-shangxiashouqi" />
            </a>
          </Tooltip>
        </dl>

        {isOpenMoveData && (
          <>
            <dl>
              <dt>Q&nbsp;Q号码</dt>：<dd>{contactsInfoCurrent?.qqNum || '--'}</dd>
            </dl>
            <dl>
              <dt>微信号码</dt>：<dd>{contactsInfoCurrent?.wechatNum || '--'}</dd>
            </dl>
            <dl>
              <dt>最高学历</dt>：{handDicColorDom(contactsInfoCurrent?.educateLevelName)}
            </dl>
            <dl>
              <dt>民族</dt>：{handDicColorDom(contactsInfoCurrent?.nationTypeName)}
            </dl>
            <dl>
              <dt>政治面貌</dt>：{handDicColorDom(contactsInfoCurrent?.politicalTypeName)}
            </dl>
            <dl>
              <dt>出生日期</dt>：<dd>{contactsInfoCurrent?.birthday ? contactsInfoCurrent?.birthday?.split(' ')?.[0] : '--'}</dd>
            </dl>
            <dl>
              <dt>个人简介</dt>：<dd>{contactsInfoCurrent?.profileInfo || '--'}</dd>
            </dl>
            <dl>
              <dt>兴趣爱好</dt>：<dd>{contactsInfoCurrent?.hobby || '--'}</dd>
            </dl>
            <dl>
              <dt>备注</dt>：<dd>{contactsInfoCurrent?.remark || '--'}</dd>
            </dl>
            <dl
              style={{
                margin: '10px 0px',
                display: 'flex',
                justifyContent: 'center',
              }}
            >
              <Tooltip title="收起">
                <a
                  onClick={() => {
                    setIsOpenMoveData(false);
                  }}
                >
                  <MyIcon style={{ fontSize: 18 }} type="icon-shangxiazhankai" />
                </a>
              </Tooltip>
            </dl>
          </>
        )}
      </div>
    </ScrollBarLayout>
  );
};
